<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dataForm.name" style="width: 50%;" placeholder="姓名"></el-input>
        <el-checkbox v-model="dataForm.checkName" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="英文名" prop="firstName">
        <el-input v-model="dataForm.firstName" placeholder="英文名"></el-input>
      </el-form-item>
      <el-form-item label="英文姓" prop="lastName">
        <el-input v-model="dataForm.lastName" placeholder="英文姓"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <ren-select v-model="dataForm.gender" dict-type="gender" placeholder="性别"></ren-select>
      </el-form-item>
      <el-form-item label="公司" prop="company">
        <el-input v-model="dataForm.company" style="width: 50%;" placeholder="公司"></el-input>
        <el-checkbox v-model="dataForm.checkCompany" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dataForm.mobile" style="width: 50%;" placeholder="手机号"></el-input>
        <el-checkbox v-model="dataForm.checkMobile" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="手机号2" prop="mobile2">
        <el-input v-model="dataForm.mobile2" style="width: 50%;" placeholder="手机号2"></el-input>
        <el-checkbox v-model="dataForm.checkMobile2" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="dataForm.tel" style="width: 50%;" placeholder="电话"></el-input>
        <el-checkbox v-model="dataForm.checkTel" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="电话2" prop="tel2">
        <el-input v-model="dataForm.tel2" style="width: 50%;" placeholder="电话2"></el-input>
        <el-checkbox v-model="dataForm.checkTel2" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input v-model="dataForm.department" placeholder="部门"></el-input>
      </el-form-item>
      <el-form-item label="职位" prop="position">
        <el-input v-model="dataForm.position" placeholder="职位"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="dataForm.address" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="地址2" prop="address2">
        <el-input v-model="dataForm.address2" placeholder="地址2"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dataForm.email" style="width: 50%;" placeholder="邮箱"></el-input>
        <el-checkbox v-model="dataForm.checkEmail" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="邮箱2" prop="email2">
        <el-input v-model="dataForm.email2" style="width: 50%;" placeholder="邮箱2"></el-input>
        <el-checkbox v-model="dataForm.checkEmail2" style="margin-left: 20px;">已核</el-checkbox>
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input v-model="dataForm.wechat" placeholder="微信"></el-input>
      </el-form-item>
      <el-form-item label="网站" prop="website">
        <el-input v-model="dataForm.website" placeholder="网站"></el-input>
      </el-form-item>
      <el-form-item label="类别" prop="category">
        <el-radio-group v-model="dataForm.category">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="行业" prop="industry">
        <el-input v-model="dataForm.industry" placeholder="行业"></el-input>
      </el-form-item>
      <el-form-item label="标签1" prop="comTradeKey1">
        <el-input v-model="dataForm.comTradeKey1" placeholder="标签1"></el-input>
      </el-form-item>
      <el-form-item label="标签2" prop="comTradeKey2">
        <el-checkbox-group v-model="dataForm.comTradeKey2">
          <el-checkbox label="启用" name="type"></el-checkbox>
          <el-checkbox label="禁用" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="联络标签" prop="contactTag">
        <el-radio-group v-model="dataForm.contactTag">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="产品介绍" prop="productIntroduce" style="height: 400px">
        <WangEditor v-model="dataForm.content"></WangEditor>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item label="来源" prop="source">
        <el-input v-model="dataForm.source" placeholder="来源"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-input v-model="dataForm.state" placeholder="状态"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import baseService from "@/service/baseService";
import WangEditor from "@/components/wang-editor/index.vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
  id: "",
  exhIds: "",
  name: "",
  ifVerifyName: 0,
  firstName: "",
  lastName: "",
  gender: "",
  company: "",
  ifVerifyCompany: 0,
  mobile: "",
  ifVerifyMobile: 0,
  mobile2: "",
  ifVerifyMobile2: 0,
  tel: "",
  ifVerifyTel: 0,
  tel2: "",
  ifVerifyTel2: 0,
  department: "",
  position: "",
  address: "",
  address2: "",
  email: "",
  ifVerifyEmail: 0,
  email2: "",
  ifVerifyEmail2: 0,
  wechat: "",
  website: "",
  category: "",
  industry: "",
  comTradeKey1: "",
  comTradeKey2: "",
  contactTag: "",
  productIntroduce: "",
  remark: "",
  source: "",
  state: "",
  creator: "",
  createTime: "",
  updater: "",
  updateTime: "",
  delFlag: "",
  checkName: false,
  checkCompany: false,
  checkMobile: false,
  checkMobile2: false,
  checkTel: false,
  checkTel2: false,
  checkEmail: false,
  checkEmail2: false,
  content: "",

});

const rules = ref({
});
watch

const init = (id?: number) => {
  visible.value = true;
  dataForm.id = "";

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }

  if (id) {
    getInfo(id);
  }
};

// 获取信息
const getInfo = (id: number) => {
  baseService.get("/crm/crmperson/" + id).then((res) => {
    Object.assign(dataForm, res.data);
    if(dataForm.ifVerifyName == 1){
        dataForm.checkName = true
    }
    if(dataForm.ifVerifyCompany == 1){
        dataForm.checkCompany = true
    }
    if(dataForm.ifVerifyMobile == 1){
        dataForm.checkMobile = true
    }
    if(dataForm.ifVerifyMobile2 == 1){
        dataForm.checkMobile2 = true
    }
    if(dataForm.ifVerifyTel == 1){
        dataForm.checkTel = true
    }
    if(dataForm.ifVerifyTel2 == 1){
        dataForm.checkTel2 = true
    }
    if(dataForm.ifVerifyEmail == 1){
        dataForm.checkEmail = true
    }
    if(dataForm.ifVerifyEmail2 == 1){
        dataForm.checkEmail2 = true
    }
  });
};

// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    if(dataForm.checkName){
      dataForm.ifVerifyName = 1
    }
    if(dataForm.checkCompany){
      dataForm.ifVerifyCompany = 1
    }
    if(dataForm.checkMobile){
      dataForm.ifVerifyMobile = 1
    }
    if(dataForm.checkMobile2){
      dataForm.ifVerifyMobile2 = 1
    }
    if(dataForm.checkTel){
      dataForm.ifVerifyTel = 1
    }
    if(dataForm.checkTel2){
      dataForm.ifVerifyTel2 = 1
    }
    if(dataForm.checkEmail){
      dataForm.ifVerifyEmail = 1
    }
    if(dataForm.checkEmail2){
      dataForm.ifVerifyEmail2 = 1
    }


    (!dataForm.id ? baseService.post : baseService.put)("/crm/crmperson", dataForm).then((res) => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};

defineExpose({
  init
});
</script>